<template>
  <qx-table :option="tableOption" :remoteData="remoteData">
    <template v-slot:top>
      <qx-form v-model="searchForm" :option="searchOption" isSearch @submit="startSearch"></qx-form>
    </template>
    <template v-slot:requestParams="{ row }">
      <QCodePrism :code="row.requestParams" classes="ellipsis-3-lines overflow-hidden no-padding"></QCodePrism>
    </template>
    <template v-slot:requestResultData="{ row }">
      <QCodePrism :code="row.requestResultData" classes="ellipsis-3-lines overflow-hidden no-padding"></QCodePrism>
    </template>
  </qx-table>
  <JsonPopup v-model="popupVisible" :jsonInfo="jsonInfo" :targetEl="targetEl"></JsonPopup>
</template>

<script setup>
import { i18n, toI18nName } from 'boot/i18n'
import { getDictData } from 'src/enum/ajaxRemoteData.js'
import { successOrFail } from 'src/enum/index.js'
import { deepClone } from 'src/utils/utils'
import { computed, onMounted, ref } from 'vue'

const jsonInfo = ref('')
const searchForm = ref({})
const targetEl = ref(false)
const businessList = ref([])
const popupVisible = ref(false)
const remoteData = ref({ dicUrl: '/operlog/api/monitorApiLogs/list' })
getDictData('SYS_BUSINESS_TYPE').then(data => (businessList.value = data))
const searchOption = computed(() => {
  return {
    labelWidth: 60, searchSpan: 4,
    column: [{
      label: `${i18n.t('SystemCore.Name')}`, field: 'userLike'
    }, {
      label: `${i18n.t('SystemCore.SubjectionOrg')}`, field: 'orgLike'
    }, {
      label: `${i18n.t('LogCore.BizCategory')}`, field: 'bussinessType', type: 'select', options: businessList.value,
      props: { label: toI18nName('labelZhCn'), value: 'key' }
    }, {
      label: `${i18n.t('LogCore.ReqResult')}`, field: 'requestResultStatus', type: 'select',
      options: successOrFail.value
    }, {
      label: `${i18n.t('LogCore.OperationTime')}`, field: 'dateInfo', type: 'daterange'
    }]
  }
})
const tableOption = computed(() => {
  return {
    column: [{
      label: `${i18n.t('Account')}`, field: 'loginName', minWidth: 60
    }, {
      label: `${i18n.t('SystemCore.Name')}`, field: 'nickName', minWidth: 60
    }, {
      label: `${i18n.t('SystemCore.SubjectionOrg')}`, field: toI18nName('orgNameZhCn'), minWidth: 80
    }, {
      label: `${i18n.t('SystemCore.SubjectionPosition')}`, field: toI18nName('postNameZhCn'), minWidth: 80
    }, {
      label: `${i18n.t('LogCore.BizCategory')}`, field: 'bussinessType', options: businessList.value,
      props: { label: toI18nName('labelZhCn'), value: 'key' }, minWidth: 80
    }, {
      label: `${i18n.t('LogCore.BizObj')}`, field: 'bussinessObject', minWidth: 80
    }, {
      label: `${i18n.t('LogCore.RequestIP')}`, field: 'requestIp', minWidth: 80
    }, {
      label: `${i18n.t('LogCore.RequestAPI')}`, field: 'requestApiPath', minWidth: 80
    }, {
      label: `${i18n.t('LogCore.ReqParams')}`, field: 'requestParams', minWidth: 80, maxWidth: 300, slot: true,
      cellClick: handleRowClick, classes: row => `requestParams_${row.id} text-grey-8`
    }, {
      label: `${i18n.t('LogCore.ReqResult')}`, field: 'requestResultStatus', options: successOrFail.value,
      align: 'center', useTag: true, minWidth: 80
    }, {
      label: `${i18n.t('ErrorMsg')}`, field: 'exceptionMsg', minWidth: 100
    }, {
      label: `${i18n.t('LogCore.OperationTime')}`, field: 'createdTime', minWidth: 80
    }, {
      label: `${i18n.t('Remarks')}`, field: 'remark', minWidth: 100
    }]
  }
})

onMounted(() => startSearch())
const handleRowClick = (row, column) => {
  if (!['requestParams', 'requestResultData'].includes(column.field) || !row[column.field]) return
  if (targetEl.value === `.${column.field}_${row.id}`) return popupVisible.value = !popupVisible.value
  targetEl.value = `.${column.field}_${row.id}`
  jsonInfo.value = row[column.field]
  popupVisible.value = true
}
const formatSearchForm = () => {
  const params = deepClone(searchForm.value)
  if (searchForm.value.dateInfo?.from) {
    params.createdStartTime = params.dateInfo?.from
    params.createdEndTime = params.dateInfo?.to
    delete params.dateInfo
  }
  return params
}
const startSearch = (_, done) => {
  remoteData.value.params = formatSearchForm()
  done && done()
}
</script>